<template>
  <div class="person">
        <div class="top">
            <img class="avatar" :src="imgUrl" alt="">
            <ul class="userData">
                <li>
                    <p class="userName">
                        {{username}}
                    </p>
                </li>
                <li class="two-cow">
                    <div class="left">
                        <img class="grad" src="http://p5.music.126.net/obj/wovDmcKXw6PCn2_CmsOk/17941165708/729a/1820/dde9/fdcaf8af1bb6a0f5740cc7555a3fcb57.png" alt="">
                        <span  class="grad2">
                            {{level}}
                        </span>
                        <span class="iconfont sex">&#xe8b4;</span>
                    </div>
                    <div class="right" @click="edit()">
                       <span class="iconfont">&#xe60e;</span>
                        <span>编辑个人信息</span>
                    </div>
                </li>
                <li class="line"></li>
                <li class="three-cow">
                  <div class="grad">
                    <ul class="grad-box">
                      <li><span>{{eventCount}}</span><span>动态</span></li>
                      <li><span>{{follows}}</span><span>关注</span></li>
                      <li><span>{{followeds}}</span><span>粉丝</span></li>
                    </ul>
                  </div>
                  <div  class="other">
                    <ul>
                      <li>
                        <span>
                        所造地区:
                        </span>
                        <span class="information">
                          江西
                        </span>
                      </li>
                      <li>
                        <span>社交网络:</span>
                        <span class="iconfont">
                          &#xe666;
                        </span>
                      </li>
                      <li>
                      <p class="informations">
                        <span class="left">
                          个人介绍:
                        </span>
                         
                        <span class="information-content" :class="{hidden:!extend}">
                          {{signature}}
                        </span>
                       <span class="iconfont extend" @click="extend = !extend">
                          &#xe644;
                        </span>
                        </p>
                      </li>
                    </ul>
                  </div>
                </li>
            </ul>
        </div>
        <div class="gd">
          <div class="title">
            <ul  ref="title">
              <li style="font-weight: 700;" @click="animation('/found',$event)">创建的歌单</li>
              <li @click="animation('/sc',$event)">收藏的歌单</li>
              <li @click="animation('/music',$event)">创建音乐栏</li>
              <div class="dh" :style="{left:dh+'px',width:dhWidth+'px',transition: miao, }"></div>
            </ul>
          </div>
        </div>
         <keep-alive>
        <router-view></router-view>
      </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'Person',
  data() {
    return{
      showPag:'/found',
      dh:2,
      dhWidth:98,
      miao:'left 0.2s linear',
      signature:'',
      // 是否展开简介
      extend:false,
      username:'',
      level:'Lv1',
      follows:'0',
      followeds:'5',
      eventCount:'6',
      imgUrl:''
    }
  },


  created() {
    
  },
  mounted() {
    console.log('res')
    // console.log(this.$store.state.loginData.data.profile.userId)
          this.$http.post('/api/user/detail',{
            uid:1300591632
          }).then((res)=>{
                if (res.status == 200&&res.data.code ==200) {
                    // console.log(res.data)
                    this.level ='Lv'+ res.data.level
                } else {
                    console.log(res)
                }
            }).catch((err)=>{
                console.log(err)
            })

             this.$http.get('/api/user/account').then((res)=>{
              console.log('person')
                if (res.status == 200&&res.data.code ==200) {
                    this.signature = res.data.profile.signature
                    this.username = res.data.profile.nickname
                    this.imgUrl = res.data.profile.avatarUrl
                } else {
                    console.log(res)
                }
            }).catch((err)=>{
                console.log(err)
            })
  },
  methods: {
    edit(){
      console.log('dd')
      return
      this.$router.push({path: '/edit'});
    },  
    animation(target,e){
      
     this.$nextTick(function () {// 调用$nextTick函数

    //e.target.innerHTML获取当前元素值
    //this.$refs.title.childNodes[0].offsetLeft// 获取dom子元素到父元素的距离
    for (let index = 0; index < this.$refs.title.childNodes.length; index++) {
      const element = this.$refs.title.childNodes[index].innerHTML;
        this.$refs.title.childNodes[index].style.fontWeight = 200;
      if(element == e.target.innerHTML  ){
                  // this.showPag = target;  
                  this.$router.push({path:target}) 
                  var str =element;
                  // console.log(this.dh)
                  // console.log(this.$refs.title.childNodes[index].offsetLeft)
          var len = 0;
          //遍历字符串，以字符的Unicode编码识别中文
         this.dhWidth = 98;
          for(var key in str)
          {
          //中文字符在Unicode编码中占据 0x4E00~0x9FBF 字段
          if( (str.charCodeAt(key) >= 0x4E00) && (str.charCodeAt(key) <= 0x9FBF) )
          {
          len += 1;
          }
          else
          {
          len ++;
          }
          }
          this.dh =this.$refs.title.childNodes[index].offsetLeft+2
          // console.log(this.dhWidth)
          // this.dhWidth = this.dhWidth*(len/4)
          // console.log(this.$refs.title.childNodes[index])
          this.$refs.title.childNodes[index].style.fontWeight = 700;
         
          
          
          
          
          
      }
    }
    
	})
    }
   
    
   
  }
}
</script>
<style lang="less" scoped>
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/iconfont.woff2?t=1657706050349') format('woff2'),
       url('../../public/font_home/iconfont.woff?t=1657706050349') format('woff'),
       url('../../public/font_home/iconfont.ttf?t=1657706050349') format('truetype');
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon5/iconfont.ttf?t=1663388423335') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
    div,span,ul,li,img{
    font-size: 0;
}
.person{
     width: 100%;
     overflow: hidden;
     box-sizing: border-box;
//   display: flex;
    // border: 1px solid red;
    .top{
        display: flex;
        width: 100%;
               .avatar{
        height: 230px;
        width: 230px;
        border-radius: 50%;
    }

    .userData{
       width: 100%;
       overflow: hidden;
        margin-left: 25px;
            .userName{
        font-weight: 800;
        font-size: 26px;
    }
        .two-cow::after{
          clear: both;
          content: '.';
          display: block;
          height:0px;
          visibility:hidden;
        }
        .two-cow{
         margin-top: 10px;
            .left{
              float: left;
              display: flex;
              align-items: center;
              .grad{
                width: 55px;
                height: 20px;
            }
            .grad2{
                padding: 2px 10px;
                background: #F0F0F0;
                border-radius: 20px;
                font-size: 13px;
                margin-left: 15px;
            }
            .sex{
              color: #E95893;
    background: #F8C6E2;
    display: inline-block;
    padding: 2px;
    border-radius: 50%;
    font-weight: 500;
    font-size: 17px;
    margin-left: 10px;
            }
            }
            .right{
              float: right;
              align-items: center;
              justify-content: center;
              display: flex;
    border: solid 0.5px #D9D9D9;
    padding: 10px 18px;
    margin-right: 15px;
    border-radius: 23px;
                span:first-child{
                display: block;
              
            }
            
            span:nth-child(1){
                color: #6F6F6F;
                font-size: 24px;
                margin-right: 5px;
            }
                span{
                    font-size: 19px;
                    color: #373737;
                
                }
            }
            .right:hover{
              cursor: pointer;
              background: #F2F2F2;
            }
        }
        .line{
          height: 1px;
          background: #E5E5E5;
          margin:10px 0px;
        }
        .three-cow{
          margin-top: 25px;
          .grad{
            .grad-box{
              display: flex;
              width: 270px;
              box-sizing: border-box;
              li{
                width: 33.3%;
                border-right: 1px solid #E5E5E5;
                text-align: center;
                span{
                  display: block;
                }
                span:first-child{
                  font-size: 24px;
                  font-weight: 400;
                }
                span:last-child{
                  font-size: 16px;
                  color: #676767;
                }
              }
            }
          }
          .other{
            ul{
              li::after{
                content:".";
                display:block;
                height:0;
                clear:both;
                visibility:hidden;
              }
              li{
                margin: 10px 0;
              span{
                font-size: 19px;
                color: #373737;
              }
              .informations{
                
              }
              .informations::after{
                  content:".";
                  display:block;
                  height:0;
                  clear:both;
                  visibility:hidden;
              }
              .information{
                font-size: 19px;
                letter-spacing: 1px;
                color: #676767;
              
               
              }
              .information-content{
                font-size: 19px;
                letter-spacing: 1px;
                color: #676767;
                line-height: 33px;
                   display: inline-block;
                width: 85%;
                    margin-top: -5px;
              }
              .hidden{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .left{
                float: left;
              }
              .extend{
                float: right;
                margin-right: 20px;
                color: #999999;
                font-size: 20px;
           
              }
              }
            }
          }
        }
    }
   
    }
    .gd{
      margin-top: 20px;
 //   max-width: 84%;
min-width: 82%;
  // border: solid #666666 1px;
//   margin: 25px 0 0 72px;
  position: relative;

  position: relative;
   .title>ul{
    display: flex;
    font-weight: 200;
    // li>a{
    //    .font23();
    //     margin-left: 35px;
    // }
    li{
       .font21px();
    }
    li:not(:first-child){
        margin-left: 35px;
    }
    
    .dh{
    width: 36px;
    height:3.5px;
    background: #EC4141;
    position: absolute;
    top: 32px;
    
}
  }
  .findBoxConcent{
    margin-top: 22px;
    // border: 1px solid palevioletred;

}
    }
    
   }
 
.iconStyleRIght{
  font-size: .119792rem /* 23/192 */;
  color: #313131;
 
}
.iconStyleLeft{
  font-size: .098958rem /* 19/192 */;
  color: #313131;
}
.font23{
  font-size: .119792rem /* 23/192 */;
}
.font23Px{
   font-size:23px;
}
.font23(){
  font-size: .119792rem /* 23/192 */;
}
.font21px(){
  font-size:21px;
}
.marginRight{
  margin-right:.072917rem /* 14/192 */;
}
.floatRight{
  float: right;
}
.jia{
  color: #666666;
  margin-right: .104167rem /* 20/192 */;
  font-weight: inherit;
}

</style>